import React from 'react';
// import {
// 	Route,
// 	Link
// } from 'react-router-dom';
import './index.scss';
import { getBanner, joinUs } from '@/api/user';
import { Carousel } from 'antd';
// import ajax from '@/api/public';

class Resource extends React.Component{
	constructor (props) {
		super(props)
		this.state = {
			joinList: [
				{
					title: '销售专员（杭州/上海）',
					duty: [
						'负责360,爱奇艺，UC，腾讯，陌陌，新浪等产品的销售，搜集新客户的资料并进行沟通，开发新客户；',
						'通过电话与客户进行有效沟通了解客户需求, 寻找销售机会并完成销售业绩；',
						'上门拜访，与客户达成合作关系；',
						'定期与合作客户进行沟通，建立良好的长期合作关系。'
					],
					 claim: [
						 '负责360,爱奇艺，UC，腾讯，陌陌，新浪等产品的销售，搜集新客户的资料并进行沟通，开发新客户；',
						 '通过电话与客户进行有效沟通了解客户需求, 寻找销售机会并完成销售业绩；',
						 '上门拜访，与客户达成合作关系；',
						 '定期与合作客户进行沟通，建立良好的长期合作关系。'
					]
				},
				{
					title: '销售专员（杭州/上海）',
					duty: [
						'负责360,爱奇艺，UC，腾讯，陌陌，新浪等产品的销售，搜集新客户的资料并进行沟通，开发新客户；',
						'通过电话与客户进行有效沟通了解客户需求, 寻找销售机会并完成销售业绩；',
						'上门拜访，与客户达成合作关系；',
						'定期与合作客户进行沟通，建立良好的长期合作关系。'
					],
					 claim: [
						 '负责360,爱奇艺，UC，腾讯，陌陌，新浪等产品的销售，搜集新客户的资料并进行沟通，开发新客户；',
						 '通过电话与客户进行有效沟通了解客户需求, 寻找销售机会并完成销售业绩；',
						 '上门拜访，与客户达成合作关系；',
						 '定期与合作客户进行沟通，建立良好的长期合作关系。'
					]
				},
				{
					title: '销售专员（杭州/上海）',
					duty: [
						'负责360,爱奇艺，UC，腾讯，陌陌，新浪等产品的销售，搜集新客户的资料并进行沟通，开发新客户；',
						'通过电话与客户进行有效沟通了解客户需求, 寻找销售机会并完成销售业绩；',
						'上门拜访，与客户达成合作关系；',
						'定期与合作客户进行沟通，建立良好的长期合作关系。'
					],
					 claim: [
						 '负责360,爱奇艺，UC，腾讯，陌陌，新浪等产品的销售，搜集新客户的资料并进行沟通，开发新客户；',
						 '通过电话与客户进行有效沟通了解客户需求, 寻找销售机会并完成销售业绩；',
						 '上门拜访，与客户达成合作关系；',
						 '定期与合作客户进行沟通，建立良好的长期合作关系。'
					]
				}
			],
			btnShow: true,
			contact: [],
			moreList: []
		}
	}
	componentDidMount () {
		getBanner({type: 5}).then(res => {
			this.setState({
				banner: res.data.list[0].image
			})
		})
		joinUs({page: 1, limit: 3}).then(res => {
			this.setState({
				joinList: res.data.list,
				contact: res.data.contact
			})
		})
	}
	addMore () {
		joinUs({page: 1, limit: 6}).then(res => {
			this.setState({
				btnShow: false,
				joinList: res.data.list
			})
		})
	}
	render() {
		return(
			<div className='about-us'>
				<div className='banner' style={{backgroundImage: `url(${this.state.banner})`}}></div>
				<div className='join-desc common-bg'>
					<div className='join-xiashuo home-contain'>
						<span>在亦盛，让工作变成生活中精彩的一部分。</span>
						<span>亦盛是一个汇聚精英的舞台，每个人都有不同的专业知识和背景，我们团结合作，彼此感染，互相学习，共同成长；</span>
						<span>亦盛团队也是一群优秀而简单的年轻人，快乐、开放、责任，作为我们的价值观，尊重每个人的个性，彼此包容，彼此珍惜；</span>
						<span>我们热爱自己的工作，并总是充满激情和活力，我们以积极的心态对待一切；</span>
						<span>我们认为工作应是简单和快乐的</span>
						<span>……</span>
						<span>如果你也是这样的人，</span>
						<span>那你，就是我们最需要的伙伴！</span>
					</div>
				</div>
				<div className='join-zhaopin home-contain'>
					<div>
						{
							this.state.joinList.map((item, index) => {
								return (
									<div className='join-module' key={index}>
										<div className='join-title'>
											{item.name}({item.address})
										</div>
										<div className='join-content'>
											<div className='join-content--lsit'>
												<pre>{item.desc}</pre>
											</div>
										</div>
										<div className='join-content'>
											<div className='join-content--lsit'>
												<pre>{item.requirement}</pre>
											</div>
										</div>
										<div className='join-line'></div>
									</div>
								)
							})
						}
					</div>
					<div className='text-center'>
						<div className={`more-btn ${this.state.btnShow ? 'show' : 'hide'}`} onClick={this.addMore.bind(this)}>...</div>
					</div>
				</div>
				<div className='join-jianli text-center text-line'>
					简历投递专线
				</div>
				{
					this.state.contact.map((item, index) => {
						return (
							<div className='text-center color-red text-line' key={index}>
								{item.address}：{item.contact}
							</div>
						)
					})
				}
				<div className='text-center text-line'>
					 <span className='color-red'>* </span>为了让我们能更方便的找到你，求职信件标题请按照职位+姓名+工作年限的格式填写。
				</div>
				<div className='text-center text-line text-special'>
					在亦盛，有充分的空间让你的才华尽情展现，而他也会给予你丰厚的回报。
				</div>
			</div>
		)
	}
}
export default Resource;
